<template>
  <div class="app-container">
    <el-tree :data="treeData" :props="defaultProps">
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>[{{ data.online===1?"在线":"离线" }}]{{ node.label }}</span>
        <span>{{ data.channel_id }}</span>
        <span v-if="(data.catalogtype===1 || data.catalogtype===''|| data.catalogtype==null)">
          <el-button type="text" size="mini" @click="video(data)">播放视频</el-button>
          <el-button type="text" size="mini" @click="timing(data)">定时截图</el-button>
          <el-button type="text" size="mini" @click="alerts(data)">报警记录</el-button>
          <el-button type="text" size="mini" @click="goRecord(data)">远程录像</el-button>
          <el-button type="text" size="mini" @click="remove(node, data)">删除</el-button>
        </span>
        <span v-if="!(data.catalogtype===1 || data.catalogtype===''|| data.catalogtype==null)" />
      </span>
    </el-tree>

    <preview-dialog :show.sync="previewShow" :media-object.sync="viewItem" media-type="gb28181" />
  </div>
</template>

<script>
import { deleteByChannelDevice, list } from '@/api/channel'
import previewDialog from './previewDialog.vue'

const TAG = '[设备通道]'
export default {
  components: {
    previewDialog
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      previewShow: false,
      parentId: null,
      viewItem: {
        'rtmp': [''], 'hls': [''], 'flv': ['']
      }
    }
  },

  created() {
    this.parentId = this.$route.query.parentId
    this.fetchData()
  },
  methods: {
    fetchData() {
      list({ parentId: this.parentId }).then(response => {
        const list = response.data.items
        this.treeData = this.toTreeData(list)
        console.info(TAG, '设备树', this.treeData)
      })
    },
    video(item) {
      this.viewItem = item
      this.previewShow = true
    },
    timing(item) {
      console.info(TAG, 'timing', item)
      this.$router.push({ path: '/gb28181/timing', query: { deviceId: item.deviceid, channelId: item.channel_id }})
    },
    alerts(item) {
      console.info(TAG, 'alerts', item)
      this.$router.push({ path: '/gb28181/alerts', query: { deviceId: item.deviceid, channelId: item.channel_id }})
    },
    goRecord(item) {
      console.info(TAG, 'goRecord', item)
      this.$router.push({ path: '/devices/remoteRecord', query: { deviceId: item.deviceid, channelId: item.channel_id }})
    },
    remove(node, item) {
      console.info(TAG, '选择的项目', item)
      this.$confirm('确认删除此子通道？').then(_ => {
        deleteByChannelDevice({ parentId: item.parentid, deviceId: item.deviceid }).then(() => {
          this.fetchData()
        })
      }).catch(_ => {
        console.error(TAG, _)
      })
    },
    toTreeData(data) {
      const cloneData = JSON.parse(JSON.stringify(data))
      const me = this
      return cloneData.filter(father => {
        const branchArr = cloneData.filter(child => {
          return father['channel_id'] === child['civilcode'] ||
           (father['channel_id'] === child['deviceid'])
        })
        branchArr.length > 0 ? father['children'] = branchArr : ''
        // 下面写的 father['civilcode'].length<20 是临时这样用下，因为有系统使用civilcode作为父子关系使用
        return father['civilcode'] === me.parentId || (father['deviceid'] === me.parentId &&
        father['civilcode'].length < 20)
      })
    }
  }
}
</script>

<style>
   .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
</style>
